<template>
  <div class="index">
    <el-carousel :interval="3000" type="card" height="40vh">
      <el-carousel-item v-for="item in img_url" :key="item">
        <img :src="item" alt="" srcset="">
      </el-carousel-item>
    </el-carousel>
    <div class="match">
      <div v-for="item in matchType" :style="{ 'background-color': item.backcolor }">
        {{ item.title }}
      </div>
    </div>
    <div class="container">
      <el-card class="notice">
        <template #header>
          <div class="card-header">
            <span>大赛通知</span>
          </div>
        </template>
        <div class="content" v-for="item in data_notice">
          <span class="title">{{ item.title }}</span>
          <span class="date">{{ item.date }}</span>
        </div>
      </el-card>
      <el-card class="news">
        <template #header>
          <div class="card-header">
            <span>大赛新闻</span>
          </div>
        </template>
        <div class="content" v-for="item in data_news">
          <span class="title">{{ item.title }}</span>
          <span class="date">{{ item.date }}</span>
        </div>
      </el-card>
      <el-card class="web">
        <template #header>
          <div class="card-header">
            <el-button @click="showrecommend = !showrecommend" text size="small" round
                       :type="showrecommend ? 'primary' : ''">
              热门推荐
            </el-button>
            <el-button text size="small" round @click="showrecommend = !showrecommend"
                       :type="showrecommend ? '' : 'primary'">
              大赛网站
            </el-button>
          </div>
        </template>
        <div v-if="showrecommend" class="constent">111</div>
        <div v-else class="content" v-for="item in data_web">
          <span class="title">{{ item.name }}</span>
          <span>>>></span>
        </div>
      </el-card>
      <div class="poster">
        <h1>大赛特色优势</h1>
        <div class="show_info">
          <div class="active" :style="{ backgroundImage: 'url(' + item.img + ')' }" v-for="item in option">
            <h3>{{ item.title }}</h3>
            <span>{{ item.content }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { data_news,data_notice,data_web,option } from '@/mock/home';

const img_url = ref([
  'https://ts1.cn.mm.bing.net/th/id/R-C.68c234201bfa0b2dff5c4940d9256eb0?rik=OnwnGhAO12NlpQ&riu=http%3a%2f%2fcdn1.52jingsai.com%2fportal%2f202012%2f31%2f174426k58hh9a8ggd5afgj.jpg&ehk=%2b7pVElKQmOXR4tMeAlnhdzxde8FO2%2f1cR2VMhJVtqqo%3d&risl=&pid=ImgRaw&r=0',
  'https://ts1.cn.mm.bing.net/th/id/R-C.b7440dd9caa9fd32b0a2466a904cc3c7?rik=nX2b3YN1UkOgNQ&riu=http%3a%2f%2fjwc.jladi.com%2f_upload%2farticle%2fimages%2f71%2f25%2f5b4cf57249c4808318081cf1d4cb%2f08149786-b69b-4e48-bb0e-403668772012.png&ehk=QCIKGi1s9t0WoFp2t1wuHws0Uiv946%2fjgP%2bSvMRTnsQ%3d&risl=&pid=ImgRaw&r=0',
  'https://ts1.cn.mm.bing.net/th/id/R-C.65c1f86228d44e7f3895611c28685a01?rik=%2bevVJNL2ZKZfKw&riu=http%3a%2f%2fcdn1.52jingsai.com%2fportal%2f202103%2f10%2f112205ozumvic4oiopphfp.jpg&ehk=9AKUN4kgwJYGWoD6HJrNdF29Mehu4L4Hyqg47OHYi%2b8%3d&risl=&pid=ImgRaw&r=0'
])
const matchType = ref([
  { 'title': '蓝桥杯', 'backcolor': 'rgb(44, 120, 251)' },
  { 'title': '大学生设计大赛', 'backcolor': 'orange' },
  { 'title': 'ACM/ICPC', 'backcolor': 'rgb(41, 164, 160)' },
  { 'title': '互联网+', 'backcolor': 'rgb(91, 219, 55)' },
  { 'title': '校内创意赛', 'backcolor': 'rgb(121, 107, 230)' }
])
const showrecommend = ref(true)
</script>

<style scoped>
.el-carousel {
  margin: 0 auto;
  width: 95%;
}

.el-carousel__item img {
  width: 100%;
  height: 100%;
}

.match {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  margin-top: 30px;
}

.match div {
  width: 16%;
  height: 50px;
  background-color: rgb(121, 107, 230);
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  border-radius: 20px;
  color: aliceblue;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  transition: all .5s ease;
}

.match div:hover {
  transform: translateY(-10px);
}

.container {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  grid-column-gap: 10px;
  align-items: start;
}

.content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 14px;
  margin-top: 15px;
  cursor: pointer;
}

.content .title {
  width: 70%;
  white-space: nowrap;
  /* 防止文字换行 */
  overflow: hidden;
  /* 隐藏超出容器的内容 */
  text-overflow: ellipsis;
}

.content:hover {
  color: brown;
}

.poster {
  grid-column: 1/4;
  text-align: center;
  margin-top: 30px;
}

.show_info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
}

.show_info>div {
  position: relative;
  width: 14%;
  height: 230px;
  background-color: aquamarine;
  margin: 10px;
  background-size: cover;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  transition: all 0.5s ease;
  cursor: pointer;
  overflow: hidden;
  text-align: center;
}

.show_info .active:hover {
  width: 230px;
}

.show_info>div:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(360deg, #5c4c90 0%, rgba(108, 63, 255, 0) 100%);
  border-radius: 10px;
  z-index: 1;
  /* 确保阴影的 z-index 低于文字 */
}

.show_info>div h3,
.show_info>div span {
  position: relative;
  z-index: 2;
  /* 文字的 z-index 高于阴影 */
  color: #ffffff;
}

.show_info>div h3 {
  top: 55%;
}

.show_info>div span {
  top: 60%;
  display: block;
  opacity: 0;
  font-size: small;
  text-align: left;
  padding: 10px;
}

.show_info .active:hover span {
  opacity: 1;
}

.card-header {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
</style>
